<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-13 14:15:33
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2025-03-31 11:29:18
 * @FilePath: \hy-ui\src\views\taskMassage\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEhome
-->
<template>
  <div>
    <div class="trainingCenter" v-if="!isVideo">
      <el-card class="box-card">
        <div class="taskContent">
          <div style="height: 48px"></div>
          <div class="clearfix">
            <span class="logoTitle">培训中心</span>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="首页" name="1"></el-tab-pane>
              <el-tab-pane label="培训计划" name="2"></el-tab-pane>
              <el-tab-pane label="学习记录" name="3"></el-tab-pane>
              <el-tab-pane label="考试" name="4"></el-tab-pane>
              <el-tab-pane label="课程中心" name="5"></el-tab-pane>
              <!-- <el-tab-pane
                label="管理后台"
                name="7"
                v-if="hasPermissions"
              ></el-tab-pane> -->
            </el-tabs>
          </div>
          <div class="cntMain">
            <Home v-if="activeName === '1'" :setActiveName="setActiveName" />
            <TrainingPlan v-if="activeName === '2'" />
            <StudyRecord v-if="activeName === '3'" />
            <ExamList v-if="activeName === '4'" />
            <CourseCenter v-if="activeName === '5'" />
          </div>
        </div>
      </el-card>
    </div>
    <Video v-if="isVideo" :currentData="otherParams.currentData"  :getList="otherParams.getList"/>
  </div>
</template>

<script>
import Home from "@/views/trainingCenter/components/home";
import TrainingPlan from "@/views/trainingCenter/components/trainingPlan";
import CourseCenter from "@/views/trainingCenter/components/courseCenter";
import StudyRecord from "@/views/trainingCenter/components/studyRecord";
import ExamList from "@/views/trainingCenter/components/examList";
import Video from "@/views/trainingCenter/components/video";
import store from "@/store";

export default {
  components: {
    Home,
    TrainingPlan,
    CourseCenter,
    StudyRecord,
    ExamList,
    Video,
  },
  provide() {
    return {
      setVideo: this.setVideo,
    };
  },
  methods: {
    handleClick(val) {
      if (val._props.name === "7") {
        this.$router.push({ path: "/training/backstageHome" });
      }
    },
    setActiveName(val) {
      this.activeName = val;
    },
    setVideo(value,params) {
      this.isVideo = value;
      this.otherParams = params
    },
  },
  data() {
    return {
      activeName: "1",
      isVideo: false,
      hasPermissions:false,
      otherParams:{}
    };
  },
  mounted() {
    const permissions = store.getters && store.getters.permissions;
    const permissionFlag = ["trainingCenter:user:backstage"];
    const all_permission = "*:*:*";
    this.hasPermissions = permissions.some((permission) => {
      return (
        all_permission === permission || permissionFlag.includes(permission)
      );
    });
  },
};
</script>

<style lang="scss" scoped>
.trainingCenter {
  margin-top: -2px;
  ::v-deep .el-card__header {
    padding: 7px 15px;
  }
  ::v-deep .el-card__body {
    padding: 0;
  }
}

.logoTitle {
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  line-height: 50px;
  margin-left: 30px;
  z-index: 1001;
  color: #2f54eb;
}

.taskContent {
  display: flex;
  flex-direction: column;

  .clearfix {
    height: 50px;
    position: fixed;
    padding: 0 15px;
    border-bottom: 1px solid #e6ebf5;
    width: 100%;
    background: #fff;
    z-index: 5;
    // top: 84px;
    ::v-deep .el-tabs {
      height: 50px;
      .el-tabs__header {
        height: 50px;
      }
      .el-tabs__nav {
        height: 50px;
      }
    }
    ::v-deep .is-active {
      background: #eff1ff;
      color: #506eee;
    }
    ::v-deep .el-tabs__header {
      width: 60%;
      margin: 0 auto;
    }
    ::v-deep .el-tabs__item {
      width: 150px;
      //  width: 12%;
      text-align: center;
      font-size: 16px;
      padding: 0 20px;
      height: 50px;
      line-height: 50px;
    }
    ::v-deep .el-tabs__nav-wrap::after {
      height: 0;
    }
    // ::v-deep .el-tabs__nav {
    //   width: 100%;
    // }
    ::v-deep .el-tabs__active-bar {
      display: none;
    }
    ::v-deep .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }
  }
}
</style>